<template>
	<view class="body">
		<view class="section">
			<view
					class="search-content ss-flex ss-col-center ss-row-between"
					@tap="click"
					:style="[
      {
        borderRadius: radius + 'px',
        background: elBackground,
        height: height + 'px',
        width: width,
      },
    ]"
					:class="[{ 'border-content': navbar }]"
			>
				<view class="ss-flex ss-col-center" v-if="navbar">
					<view class="search-icon _icon-search ss-m-l-10" :style="[{ color: props.iconColor }]"></view>
					<view class="search-input ss-flex-1 ss-line-1" @click="sheep.$router.go('/pages/index/search')" :style="[{ color: fontColor, width: width }]">
						{{ placeholder }}
					</view>
				</view>
				<uni-search-bar
						v-if="!navbar"
						class="ss-flex-1"
						:radius="data.borderRadius"
						:placeholder="data.placeholder"
						cancelButton="none"
						clearButton="none"
						@confirm="onSearch"
				/>
				<view class="keyword-link ss-flex">
					<view v-for="(item, index) in data.keywords" :key="index">
						<view
								class="ss-m-r-16"
								:style="[{ color: item.color }]"
								@tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item.text })"
						>{{ item.text }}</view
						>
					</view>
				</view>

				<view v-if="data.keywords && data.keywords.length && navbar" class="ss-flex">
					<button
							class="ss-reset-button keyword-btn"
							v-for="(item, index) in data.keywords"
							:key="index"
							:style="[{ color: item.color, marginRight: '10rpx' }]"
					>
						{{ item.text }}
					</button>
				</view>
			</view>
		</view>
		<!--<view class="section-sign ss-flex-1 ss-line-2">
			<img src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/131c122fe24e8f4484ab09d943312775f2打卡签到.png"
			     class="icon"/>
			<view class="text">签 到</view>
		</view>-->
		<!--<view class="section-sign ss-flex-1 ss-line-2">-->
		<!--	<img src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/1331ceb4a9a287494ea5e261280c01b67a客服 (1).png"-->
		<!--	     class="icon"/>-->
		<!--	<view class="text">联系客服</view>-->
		<!--</view>-->
	</view>
</template>

<script setup>
  /**
   * 基础组件 - 搜索栏
   *
   * @property {String} elBackground 			- 输入框背景色
   * @property {String} iconColor 			- 图标颜色
   * @property {String} fontColor 		  	- 字体颜色
   * @property {Number} placeholder 			- 默认placeholder
   * @property {Number} topRadius 			- 组件上圆角
   * @property {Number} bottomRadius 			- 组件下圆角
   *
   * @slot keywords							- 关键字
   * @event {Function} click 					- 点击组件时触发
   */

  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';

  // 组件数据
  const state = reactive({
    searchVal: '',
  });

  // 事件页面
  const emits = defineEmits(['click']);

  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    // 输入框背景色
    elBackground: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 36,
    },
    // 图标颜色
    iconColor: {
      type: String,
      default: '#b0b3bf',
    },
    // 字体颜色
    fontColor: {
      type: String,
      default: '#b0b3bf',
    },
    // placeholder
    placeholder: {
      type: String,
      default: 'IM任意搜~',
    },
    radius: {
      type: Number,
      default: 0,
    },
    width: {
      type: String,
      default: '670rpx',
    },
    navbar: {
      type: Boolean,
      default: true,
    },
  });

  // 点击
  const click = () => {
    emits('click');
  };

  function onSearch(e) {
    if (e.value) {
      sheep.$router.go('/pages/goods/list', { keyword: e.value });
    }
  }
</script>

<style lang="scss" scoped>

.body {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	//display: flex; /* 使用flex布局 */
	//justify-content: space-between; /* 使元素平均分布 */
	//align-items: center; /* 居中对齐元素 */
	//opacity: 1;

	.icon {
		width: 30px; /* 图标宽度 */
		height: 30px; /* 图标高度 */
    margin-left: 20rpx;
	}

	.section {
		//padding-left: 2%;
		display: flex; /* 同样使用flex布局 */
		align-items: center; /* 居中对齐元素 */
	}

	.section-sign {
		//padding-left: 2%;

		.text {
			font-size: 24rpx;
			margin-left: 4rpx;
			//margin-top: -15rpx;
			color: #3E3A39;
			font-weight: 600;
		}
	}

	.border-content {
		border: 2rpx solid #eee;
	}
	.search-content {
		width: 100%;
		height: 35px;
		opacity: 1;
		border-radius: 30px !important;
		background: #F2F2F2;
		//border: 1.5px solid #3E3A39;
		color: #7E7E7E;

		//border: 1px solid #F39800;
		flex: 1;
		// height: 80rpx;
		position: relative;
		.search-icon {
			font-size: 28rpx;
			margin-right: 5rpx;
			margin-left: 20rpx;
			margin-top: 3rpx;
		}
		.keyword-link {
			position: absolute;
			right: 16rpx;
			top: 18rpx;
		}

		.search-input {
			font-size: 27rpx;
			color: #7E7E7E !important;
		}
	}
}


</style>
